<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="#0A5AF9">
    <title>打赏支付</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/public-head.css" />
    <link rel="stylesheet" type="text/css" href="../css/online-payment.css" />
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            background-color: #EEEEEE;
            /*咋不起效果*/
        }
        .mui-table-view:before,
.mui-table-view-cell:after {
	position: absolute;
	right: 0;
	left: 0;
	height: 0px;
	content: '';
	-webkit-transform: scaleY(.5);
	transform: scaleY(.5);
	background-color: #c8c7cc;
	top: -1px;
}
/*去掉底部线条*/

.mui-table-view:after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 0px;
	content: '';
	-webkit-transform: scaleY(.5);
	transform: scaleY(.5);
	background-color: #c8c7cc;
}
    </style>
</head>

<body>
    <div class="main">
        <div class="paymenr-time">
            <div>
                <div>支付剩余时间</div>
                <div id="timer"></div>
            </div>
            <div>
                <span>打赏技师</span>
                <span>详情</span>
                <span>￥6.6</span>
            </div>
        </div>
        <!--支付方式-->
        <div class="mode">选择支付方式</div>
        <div class="mode-opt">
            <ul class="mui-table-view mui-table-view-radio" id="Paylist">
                <li class="mui-table-view-cell Pli">
                    <a class="mui-navigate-right">
                        <img src="../image/icon/details-weixin.png" / class="mui-pull-left">
                        <p>微信</p>
                    </a>
                </li>
                <li class="mui-table-view-cell Pli mui-selected list-border">
                    <a class="mui-navigate-right">
                        <img src="../image/icon/zhifub@2x.png" / class="mui-pull-left">
                        <p>支付宝</p>
                    </a>
                </li>
            </ul>
        </div>
        <!--底部-->
        <div class="confirm" tapmode onclick="openDialog()">
            <div>确认支付￥6.6</div>
        </div>
    </div>
    <!--弹窗-->
    <div class='demo'>
        <div class='demo-bg'>
            <div class='demo-txt' tapmode onclick="closeDialog()">
            	<span style="width: 26px;height:26px;float:right;margin:5px 5px 0 0;"><img style="width:100%;height:100%;" src="../image/icon/cdacha.png" alt=""></span>
                <p>支付成功 !</p>
                <a href="mine_2.html">返回首页</a>
            </div>
        </div>
</body>
<script type="text/javascript" src="../script/public-head.js"></script>
<script type="text/javascript" src="../script/rem.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/mui.js"></script>
<script type="text/javascript">
    headInner({
        title: "",
        //headleft
        headl: '<a href="javascript:history.back(-1)" style="color:white" class="mui-icon mui-icon-left-nav" tapmode onclick="api.closeWin()"></a>',
        //headright
        headr: '<a style="color:white"></a>',
        color: "", //默认是蓝色
        padding: "0px 0px 0px",
    })

    function rewardtechnician() {
        api.openWin({
        	name: 'reward-technician',
        	url: '../html/reward-technician.html'
        });
    }
    //弹窗
    var demobg = document.querySelector(".demo-bg");
    var demotxt = document.querySelector(".demo-txt");

    function openDialog() {
        demotxt.style.display = "block";
        demobg.style.display = "block";
    }

    function closeDialog() {
        demotxt.style.display = "none";
        demobg.style.display = "none";
    }
    //倒计时
  var maxtime = 15 * 60; //一个小时，按秒计算，自己调整!   
            function CountDown() {
                if (maxtime >= 0) {
                    minutes = Math.floor(maxtime / 60);
                    seconds = Math.floor(maxtime % 60);
                    msg = minutes + "分" + seconds + "秒";
                    document.all["timer"].innerHTML = msg;
                    if (maxtime == 5 * 60)alert("还剩5分钟");
                        --maxtime;
                } else{
                    clearInterval(timer);
//                  alert("时间到，结束!");
                }
            }
    timer = setInterval("CountDown()", 1000);  
</script>

</html>
